<!--
 * @Author: zj
 * @LastEditors: JESS
 * @Date: 2022-06-14 15:41:42
 * @LastEditTime: 2022-08-03 14:04:03
-->
<template>
  <div class="congestion-content" v-show="show">
    <div class="title-img flex_between">
      <div>{{roadName}} 两个时间段道路差值对比</div>
      <a-button type="default" @click="show = false">关闭</a-button>
    </div>
    <div class="contrast-top">
      <div class="tag-group">
        <div class="tag-label cus-date1">时间段一</div>
        <div class="date">
          <el-date-picker
            style="width: 230px"
            v-model="time"
            type="daterange"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
            @change="changeAnalysisDate"
          />
        </div>
        
      </div>
      <div class="tag-group">
        <div class="tag-label">时间段二</div>
        <div class="date">
          <el-date-picker
            style="width: 230px"
            v-model="time2"
            type="daterange"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
            @change="changeAnalysisDate"
          />
        </div>
      </div>
      
      <!-- <el-button type="primary" @click="searchData">查询</el-button> -->
      
    </div>
    <div class="contrast-top">
      <div class="title">拥堵数据差值</div>
      <div
        class="zhibiao"
        style="width: 100%"
        v-loading="tableLoad"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div class="item_3 flex_between">
          <div>拥堵指数差值</div>
          <div class="jichu_bai">{{ avg?.avgCongestIndex || 0 }}</div>
        </div>
        <div class="item_3 flex_between">
          <div>平均速度差值</div>
          <div class="jichu_bai">
            {{ avg?.avgCongestSpeed || 0 }}
            <span>km/h</span>
          </div>
        </div>
        <div class="item_3 flex_between">
          <div>拥堵里程差值</div>
          <div class="jichu_bai">
            {{ avg?.avgCongestLength || 0 }}
            <span>km</span>
          </div>
        </div>
      </div>
    </div>
    <div class="contrast-top">
      <div class="title">时间段一拥堵数据</div>
      <div
        class="zhibiao"
        style="width: 100%"
        v-loading="tableLoad"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div class="item_3 flex_between">
          <div>拥堵指数</div>
          <div class="jichu_bai">{{ originData?.avgCongestIndex || 0 }}</div>
        </div>
        <div class="item_3 flex_between">
          <div>平均速度</div>
          <div class="jichu_bai">
            {{ originData?.avgCongestSpeed || 0 }}
            <span>km/h</span>
          </div>
        </div>
        <div class="item_3 flex_between">
          <div>拥堵里程</div>
          <div class="jichu_bai">
            {{ originData?.avgCongestLength || 0 }}
            <span>km</span>
          </div>
        </div>
      </div>
    </div>
    <div class="contrast-top">
      <div class="title">时间段二拥堵数据</div>
      <div
        class="zhibiao"
        style="width: 100%"
        v-loading="tableLoad"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div class="item_3 flex_between">
          <div>拥堵指数</div>
          <div class="jichu_bai">{{ compareData?.avgCongestIndex || 0 }}</div>
        </div>
        <div class="item_3 flex_between">
          <div>平均速度</div>
          <div class="jichu_bai">
            {{ compareData?.avgCongestSpeed || 0 }}
            <span>km/h</span>
          </div>
        </div>
        <div class="item_3 flex_between">
          <div>拥堵里程</div>
          <div class="jichu_bai">
            {{ compareData?.avgCongestLength || 0 }}
            <span>km</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs,onMounted } from 'vue';
import customDatePicker from '@/components/customDatePicker';
import { QueryRoadCongestDetail,QueryCompareRoadCongest } from '@/api/ctdd';
import { myFixed } from '@/utils/helper/tsxHelper';
import dayjs from 'dayjs';
export default defineComponent({
  components: { customDatePicker },

  setup() {
    const state = reactive({
      roadName: '',
      roadInfo: {},
      avg: {
        avgCongestIndex: 0,
        avgCongestSpeed: 0,
        avgCongestLength: 0,
      },
      originData:{},//时间段1
      compareData:{},//时间段2
      tableLoad: false,
      time: [],
      time2: [],
      leftDiyDate:'',
      tableItem: {},
      show: false,
    });
    // 获取当前时间
    const getToday = () => {
      var date = new Date();
      var year = date.getFullYear();
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = '0' + dateArr[i];
        }
      }
      var strDate = year + '-' + dateArr[0] + '-' + dateArr[1];
      return strDate;
    };
    onMounted(()=>{
      let oneWeekStart = dayjs().startOf('w').add(1,"day").subtract(7,"day").format("YYYY-MM-DD")
      let oneWeekEnd = dayjs().startOf('w').add(1,"day").subtract(1,"day").format("YYYY-MM-DD")
      let twoWeekStart = dayjs().startOf('w').add(1,"day").subtract(14,"day").format("YYYY-MM-DD")
      let twoWeekEnd = dayjs().startOf('w').add(1,"day").subtract(8,"day").format("YYYY-MM-DD")
      state.time2 = ['2024-11-09', '2024-11-10']//[oneWeekStart,oneWeekEnd]
      state.time = ['2024-11-04', '2024-11-05']//[twoWeekStart,twoWeekEnd]
    })
    // state.time = [getToday(), getToday()];
    // const getDate = async (date) => {
    //   // console.log("date===>",date);
    //   state.leftDiyDate = `${date.startDate},${date.endDate}`
    // }
    const getData = async (item) => {
      // console.log("item----",item);
      state.show = false;
      if (!item) return;
      state.show = true;
      state.tableItem = item;
      state.tableLoad = true;
      state.roadName = item.roadname
      //更换接口 不再由前端计算 
      QueryCompareRoadCongest({
        nodeId: item.nodeId,
        roadId: item.roadId,
        analyzeDate: state.time.join(","),
        compareDate: state.time2.join(","),
      }).then((result)=>{
        state.tableLoad = false;
        const {originData,compareData,} = result;
        state.avg = {
            avgCongestIndex: Number(result.avgCongestIndex),
            avgCongestSpeed: Number(result.avgCongestSpeed),
            avgCongestLength: Number(result.avgCongestLength),
        };
        let originObj=originData,compareObj = compareData;

        for (const key in originObj) {
          originObj[key]= myFixed(Number(originObj[key]),3)
        }
        for (const key in compareObj) {
          compareObj[key] = myFixed(Number(compareObj[key]),3)
        }
        state.originData = originObj;
        state.compareData = compareObj;
       
      })
      // QueryRoadCongestDetail({
      //   nodeId: item.nodeId,
      //   roadId: item.roadId,
      //   analyzeDate: state.time[0],
      //   endDate: state.time[1],
      // }).then((res) => {
      //   state.tableLoad = false;
      //   if (res && JSON.stringify(res) !== '{}') {
      //     const { congestIndex, congestSpeed, congestLength } = item;
      //     console.log(item, '接口搜救队');
      //     const { avgCongestIndex, avgCongestSpeed, avgCongestLength } = res;
      //     const Index = Number(congestIndex) - avgCongestIndex;
      //     const Speed = Number(congestSpeed) - avgCongestSpeed;
      //     const Length = Number(congestLength) - avgCongestLength;
      //     state.avg = {
      //       avgCongestIndex: Index.toFixed(2),
      //       avgCongestSpeed: Speed.toFixed(2),
      //       avgCongestLength: Length.toFixed(2),
      //     };
      //   } else {
      //     state.avg = {
      //       avgCongestIndex: 0,
      //       avgCongestSpeed: 0,
      //       avgCongestLength: 0,
      //     };
      //   }
      // });
    };
    //changeAnalysisDate
    const changeAnalysisDate = (date) => {
      // state.time = date;
      getData(state.tableItem);
    };
    // 搜索
    const searchData = () => {
      // console.log("state.tableItem",state.tableItem);
      getData(state.tableItem);
    };
    return {
      ...toRefs(state),
      getData,
      searchData,
      changeAnalysisDate,
      // getDate,
    };
  },
});
</script>

<style scoped lang="less">
.congestion-content {
  position: absolute;
  z-index: 3;
  right: 20px;
  width: 450px;
  height: 94%;
  top: 4%;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 20px;
  .tag-group {
    display: flex;
    color: rgba(255, 255, 255, 0.7);
    align-items: center;
    margin: 0 0 1vw;
    margin-left: 10px;
    .tag-label {
      padding-right: 10px;
      flex-grow: 0;
      color: greenyellow;
    }
    .cus-date1{
      color: rgba(3, 123, 255, 1);
    }
    .date {
      border: 1px solid rgba(3, 123, 255, 1);
      border-radius: 4px;
      // flex: 0 50%;
      margin-right: 10px;
      width: 230px;
    }
  }
}
.contrast-top {
  margin-top: 30px;
  .title {
    font-size: 16px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #ffffff;
    line-height: 18px;
    position: relative;
    padding-left: 0.5vw;
    &::after {
      position: absolute;
      content: '';
      width: 0.3vh;
      height: 100%;
      background-color: #1fa3ff;
      left: 0;
      top: 0;
      border-radius: 6px;
    }
  }
  .jichu {
    margin-top: 10px;
    color: #67a8f5;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  .zhibiao {
    // margin-top: 1vw;
    color: #d9dbde;
    font-size: 14px;
    // display: flex;
    div {
      // margin-top: 10px;
      // display: flex;
      // width: 29%;
      // flex-direction: column;
      // align-items: center;

      &.item_3 {
        // width: 33.333%;
        div {
          width: 100%;
        }
      }
    }
    .jichu_bai {
      font-size: 1.2vw;
      color: #fff;
      span {
        font-size: 0.5vw;
      }
    }
  }
}
.zhuzb {
  font-size: 16px;
  color: #fff;
  margin: 10px 0;
  width: 200px;
  border-left: 1px solid #62abff;
}
.title-img {
  width: 100%;
  height: 50px;
  // padding-top: 11px;
  // padding-left: 5px;
  font-size: 16px;
  font-family: YouSheBiaoTiHei;
  color: #fff;
  line-height: 18px;
}
#container {
  position: relative;
  left: -50px;
  width: 400px;
  height: 200px;
}
:deep .el-table__inner-wrapper::before {
  background-color: transparent !important;
}
:deep .el-input__wrapper {
  background: transparent !important;
  color: white;
}
:deep .el-input__wrapper {
  background-color: #ffffff00;
  box-shadow: 0px 0px 0px;
}
:deep .el-select {
  --el-select-border-color-hover: none;
  --el-select-input-focus-border-color: none;
}
.mymap-container {
  color: white;
}
:deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  color: #fff;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

:deep .el-table tr {
  background-color: transparent !important;
}

:deep .el-table tr:hover > td {
  background-color: transparent !important;
}

:deep .el-table th {
  background-color: transparent !important;
  border-bottom: none !important;
  color: #fff;
}

:deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  border-bottom: none !important;
}
</style>
